<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="../js/mui.js"></script>
		<script src="../js/stepData.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.simple.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-table-view-cell:after {
				height: 0
			}
			
			.mui-table-view-cell:before {
				height: 0
			}
			
			.pieBG {
				background-image: url(../images/step/2.png);
				background-repeat: no-repeat;
				background-position-x: center;
				background-size: 100% 100%;
				width: 70vw;
				height: calc(70vh / 1.7);
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.pie {
				width: 70%;
				height: 70%;
			}
			
			.map {
				width: 100%;
				height: 40vh;
				padding: 0 0;
				margin: 0 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="titleTxt">任务1</h1>
		</header>

		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="pieBG">
						<div class="pie">
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-row" style="text-align: center;">
						<div class="mui-col-sm-12 mui-col-xs-12" id="countTxt">
							目标步数:{{count}}
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6" id="timeTxt">
							运动时长:{{time}}
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6" id="calTxt">
							消耗卡路里:{{cal}}
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell" style="padding: 0 0;">
					<img src="../images/step/3.png" width="100%" height="100%" />
				</li>
			</ul>
			<div class="map" id="map">
				地图加载中...
			</div>

		</div>

		<script type="text/javascript">
			var oldBack = mui.back;

			mui.back = function() {
				if(cur < count) {
					var btnArr = ["取消", "确定"];
					mui.confirm("当前任务未完成，确定退出?", "提示", btnArr, function(e) {
						if(e.index == 1) {
							stop();
							oldBack();
						}
					});
				} else {
					stop();
					oldBack();
				}
			}
			mui.init();

			var id = 0;
			var cur = 0; //当前步数
			var count = 0; //目标步数
			var preStep; //之前的步数
			var time = 0; //时间
			var cal = 0; //卡路里
			var startLinster = null;
			var stopLinster = null;
			var mapObj = null;
			var intervalObj = null;

			var coustomOption = {};
			mui.extend(coustomOption, option);
			coustomOption.series.radius = ['65%', '100%'];
			coustomOption.series.data[0].label.normal.show = true;
			var chart = echarts.init(document.querySelector(".pie"));

			var titleTxt = document.querySelector("#titleTxt");
			var timeTxt = document.querySelector("#timeTxt");
			var countTxt = document.querySelector("#countTxt");
			var calTxt = document.querySelector("#calTxt");

			if(mui.os.android) {
				var Sensor = plus.android.importClass("android.hardware.Sensor");
				var Context = plus.android.importClass("android.content.Context");
				var SensorManager = plus.android.importClass("android.hardware.SensorManager");

				var sensorManager = plus.android.runtimeMainActivity().getSystemService(Context.SENSOR_SERVICE);

				var stepCount = sensorManager.getDefaultSensor(Sensor.TYPE_STEP_COUNTER);
				var stepDetector = sensorManager.getDefaultSensor(Sensor.TYPE_STEP_DETECTOR);

				var eventHandler = plus.android.implements("android.hardware.SensorEventListener", {
					"onSensorChanged": function(event) {
						var tmp = plus.android.getAttribute(event, "values")
						if(!preStep) preStep = tmp;
						cur += tmp - preStep;
						preStep = tmp;
						refresh();
					},
					"onAccuracyChanged": function(sensor, accuracy) {

					}
				});

				startLinster = function() {
					sensorManager.registerListener(eventHandler, stepCount, SensorManager.SENSOR_DELAY_NORMAL);
				};
				stopLinster = function() {
					sensorManager.unregisterListener(eventHandler);
				};
			}

			window.addEventListener('taskId', function(event) {
				id = parseInt(event.detail.id);
				if(!mapObj) mapObj = new plus.maps.Map("map");
				mapObj.showUserLocation(true);
				mapObj.getUserLocation(function(state, pos) {
					if(state == 0) {
						mapObj.centerAndZoom(pos, 18);
					} else {
						mui.toast("定位失败，请确保GPS已经开启");
					}
				});

				start();
			});

			function start() {
				cur = 0;
				preStep = null;
				time = 0;
				for(var i = 0; i < taskData.length; i++) {
					if(taskData[i].id == id) {
						titleTxt.innerText = taskData[i].name;
						count = taskData[i].target;
						break;
					}
				}
				refresh();
				startLinster();

				intervalObj = setInterval(function() {
					time += 0.1;
					timeTxt.innerText = "运动时长:" + time.toFixed(2);
				}, 100)

			}

			function stop() {
				stopLinster();
				if(intervalObj) clearInterval(intervalObj);
				intervalObj = null;
			}

			function refresh() {
				countTxt.innerText = "目标步数:" + count;
				coustomOption.series.data[0].value = cur;
				coustomOption.series.data[1].value = Math.max(count - cur, 0);
				chart.setOption(coustomOption);
				calTxt.innerText = "消耗卡路里:" + (cur / 100).toFixed(2)
			}
		</script>
	</body>

</html>